<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国4A-5A景区分布地图</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/maps/china.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #0c1b2f, #121c32, #0a1428);
            color: #e6f7ff;
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }

        body::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                radial-gradient(circle at 10% 20%, rgba(26, 92, 160, 0.1) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(32, 140, 130, 0.1) 0%, transparent 20%);
            z-index: -1;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            padding: 30px 0;
            position: relative;
            margin-bottom: 30px;
        }

        .header-content {
            max-width: 800px;
            margin: 0 auto;
        }

        h1 {
            font-size: 2.8rem;
            margin-bottom: 15px;
            background: linear-gradient(to right, #4facfe, #00f2fe);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .subtitle {
            font-size: 1.2rem;
            color: #a0d2ff;
            margin-bottom: 25px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
        }

        .stats-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 25px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: rgba(16, 33, 58, 0.7);
            border-radius: 12px;
            padding: 20px 30px;
            min-width: 200px;
            text-align: center;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(64, 128, 255, 0.2);
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
            border-color: rgba(64, 128, 255, 0.4);
        }

        .stat-value {
            font-size: 2.5rem;
            font-weight: bold;
            margin: 10px 0;
            color: #4facfe;
            text-shadow: 0 0 15px rgba(79, 172, 254, 0.5);
        }

        .stat-label {
            font-size: 1.1rem;
            color: #88c1ff;
        }

        .dashboard {
            display: flex;
            gap: 30px;
            margin-top: 20px;
        }

        .map-container {
            flex: 3;
            background: rgba(16, 33, 58, 0.8);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(64, 128, 255, 0.2);
            position: relative;
        }

        .map-header {
            padding: 20px;
            border-bottom: 1px solid rgba(64, 128, 255, 0.2);
        }

        .map-title {
            font-size: 1.5rem;
            color: #e0f7ff;
            display: flex;
            align-items: center;
        }

        .map-title i {
            margin-right: 10px;
            color: #4facfe;
        }

        #map {
            width: 100%;
            height: 600px;
        }

        .top-provinces {
            flex: 1;
            background: rgba(16, 33, 58, 0.8);
            border-radius: 16px;
            padding: 25px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(64, 128, 255, 0.2);
        }

        .section-title {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: #e0f7ff;
            display: flex;
            align-items: center;
        }

        .section-title i {
            margin-right: 10px;
            color: #4facfe;
        }

        .province-list {
            list-style: none;
        }

        .province-item {
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
            border-bottom: 1px solid rgba(64, 128, 255, 0.1);
            transition: all 0.3s ease;
        }

        .province-item:hover {
            background: rgba(64, 128, 255, 0.1);
            transform: translateX(5px);
        }

        .province-name {
            display: flex;
            align-items: center;
        }

        .province-name i {
            margin-right: 10px;
            color: #00f2fe;
        }

        .province-value {
            font-weight: bold;
            color: #00f2fe;
        }

        .legend-info {
            padding: 15px;
            background: rgba(10, 25, 47, 0.7);
            border-radius: 10px;
            margin-top: 15px;
            border: 1px solid rgba(64, 128, 255, 0.2);
        }

        .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }

        .color-box {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            margin-right: 10px;
        }

        .footer {
            text-align: center;
            padding: 30px 0;
            margin-top: 40px;
            color: #5d8aa8;
            font-size: 0.9rem;
            border-top: 1px solid rgba(64, 128, 255, 0.1);
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

        .btn {
            background: linear-gradient(to right, #4facfe, #00f2fe);
            color: #0a1428;
            border: none;
            padding: 12px 25px;
            border-radius: 30px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            font-size: 1rem;
            display: flex;
            align-items: center;
        }

        .btn i {
            margin-right: 8px;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(79, 172, 254, 0.5);
        }

        .btn:active {
            transform: translateY(1px);
        }

        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(12, 27, 47, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            z-index: 100;
            border-radius: 16px;
        }

        .loader {
            width: 60px;
            height: 60px;
            border: 5px solid rgba(79, 172, 254, 0.2);
            border-top: 5px solid #4facfe;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 20px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loading-text {
            font-size: 1.2rem;
            color: #a0d2ff;
            font-weight: 500;
        }

        .error-message {
            text-align: center;
            padding: 60px 20px;
            color: #ff6b6b;
        }

        .error-message i {
            font-size: 3rem;
            margin-bottom: 20px;
        }

        .error-message p {
            font-size: 1.2rem;
            margin-bottom: 15px;
        }

        .error-message button {
            background: linear-gradient(to right, #ff6b6b, #ff8e8e);
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 30px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        .error-message button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.5);
        }

        /* 响应式设计 */
        @media (max-width: 1100px) {
            .dashboard {
                flex-direction: column;
            }

            .top-provinces {
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 2.2rem;
            }

            .subtitle {
                font-size: 1rem;
            }

            .stats-container {
                gap: 15px;
            }

            .stat-card {
                padding: 15px;
                min-width: 150px;
            }

            .stat-value {
                font-size: 2rem;
            }
        }

        @media (max-width: 480px) {
            .stats-container {
                flex-direction: column;
                align-items: center;
            }

            .stat-card {
                width: 100%;
                max-width: 300px;
            }

            .controls {
                flex-direction: column;
                align-items: center;
            }

            .btn {
                width: 100%;
                max-width: 300px;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="header-content">
                <h1>中国4A-5A景区分布地图</h1>
                <p class="subtitle">
                    本可视化展示了全国各省市自治区的高品质旅游景区分布情况，数据涵盖国家级4A和5A景区。
                    通过颜色梯度直观展示各地区景区数量差异，帮助您了解中国旅游资源分布格局。
                </p>

                <div class="stats-container">
                    <div class="stat-card">
                        <div class="stat-value" id="total-provinces">0</div>
                        <div class="stat-label">省级行政区</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="total-5a">0</div>
                        <div class="stat-label">5A级景区</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="total-4a">0</div>
                        <div class="stat-label">4A级景区</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="max-province">0</div>
                        <div class="stat-label">最多景区省份</div>
                    </div>
                </div>
            </div>
        </header>

        <div class="dashboard">
            <div class="map-container">
                <div class="map-header">
                    <div class="map-title">
                        <i class="fas fa-map-marked-alt"></i>
                        <span>中国4A-5A景区分布热力图</span>
                    </div>
                </div>
                <div id="map">
                    <div class="loading-overlay">
                        <div class="loader"></div>
                        <div class="loading-text">正在加载景区数据，请稍候...</div>
                    </div>
                </div>
            </div>

            <div class="top-provinces">
                <div class="section-title">
                    <i class="fas fa-medal"></i>
                    <span>景区数量TOP10省份</span>
                </div>
                <ul class="province-list" id="top-province-list">
                    <li class="province-item">
                        <div class="loading-text">正在加载数据...</div>
                    </li>
                </ul>

                <div class="legend-info">
                    <div class="section-title">
                        <i class="fas fa-info-circle"></i>
                        <span>图例说明</span>
                    </div>
                    <div class="legend-item">
                        <div class="color-box" style="background: #50a3ba;"></div>
                        <div>景区较少 (0-15个)</div>
                    </div>
                    <div class="legend-item">
                        <div class="color-box" style="background: #eac763;"></div>
                        <div>景区中等 (16-30个)</div>
                    </div>
                    <div class="legend-item">
                        <div class="color-box" style="background: #d94e5d;"></div>
                        <div>景区密集 (31-50个)</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="controls">
            <button class="btn" onclick="downloadMap()">
                <i class="fas fa-download"></i> 导出图片
            </button>
            <button class="btn" onclick="toggleFullscreen()">
                <i class="fas fa-expand"></i> 全屏查看
            </button>
            <button class="btn" onclick="resetMap()">
                <i class="fas fa-sync-alt"></i> 重置视图
            </button>
        </div>

        <div class="footer">
            <p>可视化设计：旅游数据分析中心</p>
        </div>
    </div>

    <script>
        // 全局图表对象
        let chart = null;
        let mapData = [];
        let stats = {
            totalProvinces: 0,
            total5A: 0,
            total4A: 0,
            maxProvince: ''
        };

        // 页面加载完成后获取数据
        $(document).ready(function() {
            loadData();
        });

        // 从后端加载数据
        function loadData() {
            // 显示加载状态
            $('.loading-overlay').show();

            // 获取地区统计数据
            $.ajax({
                url: '/menu/get_region_stats',
                type: 'GET',
                data: {
                    page: 1,
                    limit: 1000  // 获取所有数据
                },
                success: function(response) {
                    if (response.code === 0) {
                        // 处理数据
                        processData(response);

                        // 初始化地图
                        initMap();

                        // 更新统计数据卡片
                        updateStatsCards();

                        // 更新TOP10省份列表
                        updateTopProvinces();

                        // 更新时间
                        updateTime();
                    } else {
                        showError('获取数据失败: ' + response.msg);
                    }
                },
                error: function(xhr, status, error) {
                    showError('请求失败: ' + error);
                },
                complete: function() {
                    $('.loading-overlay').hide();
                }
            });
        }

        // 处理后端返回的数据
        function processData(response) {
            const data = response.data;
            const statsData = response.stats;

            // 初始化统计数据
            stats.totalProvinces = response.count;
            stats.total5A = statsData.grand_high_grade;
            stats.total4A = statsData.grand_total_sales - stats.total5A;

            // 处理地图数据
            const provinceMap = {};

            // 按省份分组数据
            data.forEach(item => {
                const province = item.province;
                if (!provinceMap[province]) {
                    provinceMap[province] = {
                        province: province,
                        count: 0,
                        highGrade: 0
                    };
                }

                // 累加高等级景区数量
                provinceMap[province].highGrade += item.high_grade_count;
                provinceMap[province].count = provinceMap[province].highGrade;
            });

            // 转换为数组
            mapData = Object.values(provinceMap);

            // 找出景区最多的省份
            let maxCount = 0;
            mapData.forEach(province => {
                if (province.count > maxCount) {
                    maxCount = province.count;
                    stats.maxProvince = province.province + ' (' + maxCount + ')';
                }
            });
        }

        // 初始化地图
        function initMap() {
            // 准备地图需要的数据格式
            const formattedData = mapData.map(item => ({
                name: item.province,
                value: item.count
            }));

            // 初始化图表
            chart = echarts.init(document.getElementById('map'), 'dark');

            // 地图配置
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        return params.name + '<br/>' +
                               '4A-5A景区数量: ' + params.value + '<br/>' +
                               '占全国比例: ' + (params.value / stats.total5A * 100).toFixed(1) + '%';
                    }
                },
                visualMap: {
                    show: true,
                    type: "piecewise",
                    min: 0,
                    max: 50,
                    inRange: {
                        color: ['#50a3ba', '#eac763', '#d94e5d']
                    },
                    calculable: true,
                    inverse: false,
                    splitNumber: 5,
                    hoverLink: true,
                    orient: "vertical",
                    right: 30,
                    bottom: 100,
                    textStyle: {
                        color: '#e0f7ff'
                    }
                },
                series: [{
                    name: "4A-5A景区分布",
                    type: "map",
                    map: "china",
                    roam: true,
                    zoom: 1.2,
                    label: {
                        show: true,
                        fontSize: 10,
                        color: 'rgba(255,255,255,0.9)'
                    },
                    emphasis: {
                        label: {
                            color: '#fff',
                            fontSize: 12,
                            fontWeight: 'bold'
                        },
                        itemStyle: {
                            areaColor: '#00f2fe',
                            borderColor: '#fff'
                        }
                    },
                    data: formattedData,
                    nameProperty: "name"
                }],
                title: {
                    text: "",
                    left: "center",
                    textStyle: {
                        color: "#fff",
                        fontSize: 20
                    }
                }
            };

            // 应用配置
            chart.setOption(option);

            // 窗口大小变化时重新调整图表
            window.addEventListener('resize', function() {
                chart.resize();
            });

            // 添加地图点击事件
            chart.on('click', function(params) {
                const province = params.name;
                const value = params.value;
                const percentage = (value / stats.total5A * 100).toFixed(1);

                alert('您选择了: ' + province + '\n' +
                      '景区数量: ' + value + '个\n' +
                      '占全国比例: ' + percentage + '%');
            });
        }

        // 更新统计数据卡片
        function updateStatsCards() {
            $('#total-provinces').text(stats.totalProvinces);
            $('#total-5a').text(stats.total5A);
            $('#total-4a').text(stats.total4A);
            $('#max-province').text(stats.maxProvince);
        }

        // 更新TOP10省份列表
        function updateTopProvinces() {
            // 按景区数量降序排序
            const sortedProvinces = [...mapData].sort((a, b) => b.count - a.count).slice(0, 10);

            // 清空列表
            $('#top-province-list').empty();

            // 添加TOP10省份
            sortedProvinces.forEach((province, index) => {
                const rank = index + 1;
                const listItem = `
                    <li class="province-item">
                        <div class="province-name">
                            <i class="fas fa-${rank}"></i>
                            <span>${province.province}</span>
                        </div>
                        <div class="province-value">${province.count}</div>
                    </li>
                `;
                $('#top-province-list').append(listItem);
            });
        }



        // 显示错误信息
        function showError(message) {
            $('#map').html(`
                <div class="error-message">
                    <i class="fas fa-exclamation-triangle"></i>
                    <p>${message}</p>
                    <button onclick="location.reload()">重新加载</button>
                </div>
            `);
        }

        // 交互功能
        function downloadMap() {
            if (chart) {
                const url = chart.getDataURL({
                    type: 'png',
                    pixelRatio: 2,
                    backgroundColor: '#0c1b2f'
                });
                const link = document.createElement('a');
                link.href = url;
                link.download = '中国4A-5A景区分布地图.png';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            } else {
                alert('图表未初始化，请等待数据加载完成');
            }
        }

        function toggleFullscreen() {
            const elem = document.getElementById('map');
            if (!document.fullscreenElement) {
                if (elem.requestFullscreen) {
                    elem.requestFullscreen();
                }
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
            }
        }

        function resetMap() {
            if (chart) {
                chart.setOption({
                    series: [{
                        zoom: 1.2
                    }]
                });
            }
        }
    </script>
</body>
</html>